<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <meta name="cdnload" content="vue" />
    <link rel="stylesheet" href="/assets/css/css3-flex.css" />
    <title>040-中国生育模拟</title>
    <style>
      .user_box {
        display: inline-block;
        width: 30px;
        border: 1px solid #ccc;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="box">
        <p>背景： 那个年代我们的父辈爷爷辈们生育没有计划， 随便生， 而且还有重男轻女的理想</p>
        <p>其具体表现为</p>
        <ul>
          <li>家里生了男孩之后 生育欲望就会下降</li>
          <li>生了女孩之后，就很想生直到生到男孩或者生了太多养不起了为止</li>
        </ul>
      </div>
      <div id="result"></div>
      <table style="width: 100%" border>
        <tr>
          <td>序号</td>
          <td>数量</td>
          <td>分布情况</td>
        </tr>
        <tr v-for="(item, index) in result" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.length }}</td>
          <td>
            <div>
              <div v-for="(u, ui) in item" :key="ui" class="user_box">{{ u }}</div>
            </div>
          </td>
        </tr>
      </table>
      <br />
      <div>{{ count }}</div>
    </div>
    <script type="module" src="./040-main.js"></script>
  </body>
</html>
